<template>
  <div id="app">
    <Counter/>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import Counter from './components/Counter/index.vue'

/* 
使用ref的情况:
  基本类型
  数组
  对象  整体替换操作
使用reactive的情况:
  对象: 更新对象内部的数据
当ref接收的数据是数组或对象时, 内部会利用reactive自动将数据转换为Proxy对象

定义基本类型/数组的响应式数据: ref

*/
const count = ref(3)
const person = ref({
  name: 'tom',
  age: 12
})
const arr = ref<number[]>([])

arr.value = [1, 3]

person.value = {
  name: 'tom2',
  age: 13
}
person.value.name = 'tom3'
const person2 = reactive({
  name: 'tom',
  age: 12
})
person2.name = 'tom2'



</script>

